<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证框</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
  $(function () {
    var email = $("#email");
    email.validatebox({
      //是否是必填字段，默认值为false
      required : true,
      //验证的字段类型，可以是字符串（例如选择器的字符串表示）或字符串构成的数组
      validType : 'email',
      missingMessage : '请填写电子邮件地址',
      invalidMessage : '错误：邮箱地址格式不正确！',
      //延迟到最后验证输入值，默认值为200（单位：毫秒）
      //delay : 300,
      //当文本框内容无效的时候提示消息显示的位置，默认值为right，可选值为left
      tipPosition : 'left',
      //是否关闭验证，默认值为false
      //novalidate: true
    })
    //销毁验证框
    //email.validatebox('destroy');
    // 实现equals规则
    $.extend($.fn.validatebox.defaults.rules, {
      equals : {
        //验证器包括字段值和param两个参数。第二个参数是可选的，由用户传入并与value进行比对，若value符合条件则返回true通过验证
        validator : function (value, param) {
          return value == $(param[0]).val();
        },
        message : '两次输入的密码不一致'
      }
    });
    $("#validatebox").validatebox({
      required : true,
      validType : 'equals["#password"]'
    });
  })
</script>
</head>
<body>
  <label>密码<input id="password" type="password" class="easyui-validatebox" data-options="required: true"></label>
  <label>重复密码<input id="validatebox" type="password" class="easyui-validatebox"></label>
  <label>电子邮件地址<input id="email"></label>
</body>
</html>